<template>
    <el-card class="box-card">
      <div style="display: flex">
        <el-row class="pic">
          <el-card :body-style="{ padding: '0px' }">
            <img
                src="/preview.png"
                class="image"/>
          </el-card>
        </el-row>
        <router-view/></div>
    </el-card>
</template>

<script>
import {ElMessage} from "element-plus";
export default {
  name: "index",
  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        //callback(new Error('请输入密码！'));
      } else {
        callback();
      }
    };
    var validateid = (rule, value, callback) => {
      if (!value) {
        //callback(new Error('请输入用户名！'));
      } else {
        callback();
      }
    };
    return{
      //重置密码
      resetForm: {},
      resetFormRules: {
        password: [
          { required: true, validator: validatePass,trigger: 'blur' }
        ],
        username: [
          { required: true, validator: validateid, trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: validateid, trigger: 'blur' }
        ]
      },

    }
  },
  methods:{
    subup(resetForm){
      this.$refs[resetForm].validate((valid)=>{
        if(valid){
          this.$http.post("/user/login",this.resetForm).then(res=>{
            if(res.statusCode == '200'){
              localStorage.setItem("token",res.data.userToken)
              ElMessage({
                message: '登录成功！',
                type: 'success',
              })
              this.$router.push("/")
            }else {
              ElMessage.error('登录失败！')
            }
          }).catch(()=>{
            ElMessage.error('登录失败！')
          })
        }else{
          ElMessage.error('请填写！')
          return false;
        }
      })
    },
    subup_phone(){
      this.$http.post("/user/login_phone",this.resetForm).then(res=>{
        if(res.statusCode == '200'){
          localStorage.setItem("token",res.data.userToken)
          ElMessage({
            message: '登录成功！',
            type: 'success',
          })
          this.$router.push("/")
        }else {
          ElMessage.error('登录失败！')
        }
      }).catch(()=>{
        ElMessage.error('登录失败！')
      })
    },
    register(){
      this.$router.push("register")
    }
  },
  created() {
    localStorage.removeItem("token")
  }

}
</script>

<style scoped>


.box-card {
  background-color:rgba(255,255,255,0);
  width: 1024px;
  margin-left: 20%;
  box-shadow: white;
  margin-top: 5%;
  border: 0px;
  box-shadow: none;
}
.pic {
  width: 50%;
}
.box-card {
  background-color:rgba(255,255,255,0);
  width: 1024px;
  margin-left: 20%;
  box-shadow: white;
  margin-top: 5%;
  border: 0px;
  box-shadow: none;
}

</style>
